<template>
  <div v-if="showConfirm" class="confirm-container">
    <div class="confirm-bg" @click="switchConfirm()"/>
    <div class="confirm-main">
      <i class="el-icon-close" @click="switchConfirm()"/>
      <img :src="icon" alt="" class="confirm-icon">
      <div class="content">{{ switchConfirmMsg || '是否确定覆盖执行人' }}</div>
      <div class="btn-list">
        <el-button type="primary" size="small" @click="switchConfirm(true)">确定</el-button>
        <el-button class="cancel-btn-style" plain type="primary" size="small" @click="switchConfirm()">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import icon from '@/assets/hint.png';

export default {
  data() {
    return {
      icon,
      showConfirm: false,
      confirmType: 1,
      confirmData: {},
      switchConfirmMsg: '是否确定覆盖执行人'
    };
  },
  methods: {
    switchConfirm(setData) {
      this.showConfirm = false;
      if (setData) {
        this.confirmType = setData;
        this.$emit('setConfirmData', this.confirmData);
      }
      this.confirmData = {};
    },
    initConfirm(data, msg) {
      this.showConfirm = true;
      this.confirmData = data;
      this.switchConfirmMsg = msg;
    }
  }
};
</script>
<style lang="scss" scoped>
.confirm-container {
  position: fixed;
  z-index: 2000;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  .confirm-bg {
    position: fixed;
    z-index: 1990;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.3);
    cursor: pointer;
  }
  .confirm-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 50%;
    z-index: 1999;
    background: #fff;
    top: 50%;
    width: 400px;
    border-radius: 12px;
    margin-left: -200px;
    margin-top: -75px;
    .content {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      text-align: center;
      margin: 22px 0 27px;
    }
    .el-icon-close {
      font-size: 20px;
      position: absolute;
      right: 10px;
      top: 10px;
      color: #999;
      cursor: pointer;
    }
    .btn-list {
      display: flex;
      justify-content: center;
      margin-bottom: 16px;
    }
  }
  .confirm-icon {
    width: 88px;
    margin-top: 32px;
    text-align: center;
  }
}
</style>
